<template>
  <div class="authorityList">
    <el-card>
      <!-- <div class="opt_wrap">
        <el-button
          type="text"
          @click="goToURL('authorityOperation', { pageType: 'create' })"
        >
          <i class="iconfont icon-add"></i>
          新建
        </el-button>
      </div> -->

      <div class="opt_wrap">
        <div class="opt_wrap_left">
          <!-- <p>
            已选中<span style="color: #1796EB">{{ selectedNum }}</span
            >项
          </p>
          <p
            v-if="showBtn && selectedNum === 1 && selectionCustomer"
            @click="
              goToURL('teacherInfo', {
                pageType: 'edit',
                id: selectionCustomer[0].id
              })
            "
          >
            <i class="iconfont icon-fenpai"></i>
            编辑
          </p>
          <p v-if="showBtn" @click="showDelModal = true">
            <i class="iconfont icon-shanchu1"></i>
            删除
          </p> -->
        </div>
        <div class="opt_wrap_right">
          <p
            class="add"
            @click="
              goToURL('authorityOperation', {
                pageType: 'create',
                role_id: role_id
              })
            "
          >
            <i
              class="iconfont icon-xinjian1"
              style="color: white; font-size: 12px; margin-right: 4px;"
            ></i>
            新建
          </p>
        </div>
      </div>

      <div class="search_wrap">
        <el-input
          placeholder="用户名/姓名/邮箱/手机号"
          v-model="searchCondition"
          style="width: 260px;"
          @keyup.enter.native="queryListData"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-select
          v-model="role_id"
          filterable
          clearable
          @change="queryListData"
          placeholder="请选择角色"
        >
          <el-option
            v-for="item in roleData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="teacher_type"
          filterable
          clearable
          @change="queryListData"
          placeholder="请选择教师类型"
        >
          <el-option
            v-for="item in teacherType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="table_list">
        <el-table
          :data="tableListData"
          min-height="500"
          border
          v-loading="loading"
          style="width: 100%"
        >
          <el-table-column type="index" align="center" width="40" label="ID" />
          <el-table-column align="center" label="用户名">
            <template slot-scope="scope">
              <span>{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="密码">
                      <template slot-scope="scope">
                          <span>{{scope.row.password}}</span>
                      </template>
                    </el-table-column> -->
          <el-table-column align="center" label="姓名">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="邮箱">
            <template slot-scope="scope">
              <span>{{ scope.row.email }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="手机号">
            <template slot-scope="scope">
              <span>{{ scope.row.mobile }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="教师类型">
            <template slot-scope="scope">
              <span>{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="上课次数">
                      <template slot-scope="scope">
                          <span>{{scope.row.class_count}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="上课时长">
                      <template slot-scope="scope">
                          <span>{{scope.row.class_time}}</span>
                      </template>
                    </el-table-column> -->
          <el-table-column align="center" label="角色" width="150">
            <template slot-scope="scope">
              <div
                class="flag"
                :style="{ background: scope.row.role_arr.color }"
              >
                {{ scope.row.role_arr.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" width="80" label="状态">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="禁用后账号将无法登陆"
                placement="top"
              >
                <el-switch
                  v-model="scope.row.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  disabled
                  @click.native="changeStatus(scope.row.id, scope.row.status)"
                >
                </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="160">
            <template slot-scope="scope">
              <el-row type="flex" align="center">
                <!-- <el-col :span="8" >
                                    <el-button type="text"  size="small"  @click="goToURL('teacherClassInfo',{pageType:'details', id:scope.row.id})">上课记录</el-button>
                                </el-col> -->
                <el-col :span="8">
                  <el-button
                    type="text"
                    size="small"
                    @click="
                      goToURL('authorityOperation', {
                        pageType: 'edit',
                        id: scope.row.id
                      })
                    "
                    >编辑</el-button
                  >
                </el-col>
                <el-col :span="8">
                  <el-button
                    type="text"
                    size="small"
                    @click="
                      goToURL('authorityConfig', {
                        role: 'teacher',
                        role_id: scope.row.id
                      })
                    "
                    :disabled="scope.row.role_id == 1"
                    >权限</el-button
                  >
                </el-col>
                <el-col :span="8">
                  <el-button
                    type="text"
                    size="small"
                    @click="handleDelete(scope.row.id)"
                    :disabled="scope.row.role_id == 1"
                    >删除</el-button
                  >
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <link-pagination
          :total="total"
          :currentPage="currentPage"
          :limit="limit"
          v-if="total != 0"
          @pagination="getPaginationParams"
        ></link-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { changeTitleMinin, paginationMixin, deleteMixin } from "@/mixin";
import http from "@/api/teacher";
export default {
  name: "authorityList",
  mixins: [changeTitleMinin, paginationMixin, deleteMixin],
  data() {
    return {
      searchCondition: null,
      loading: false,
      tableListData: [],
      http: http,
      role_id: null,
      teacher_type: null,
      roleData: [],
      teacherType: []
    };
  },
  methods: {
    goToURL(name, params) {
      this.$router.push({ name, params });
    },
    queryListData() {
      this.getListData();
    },
    changeStatus(id, statusBoolean) {
      if (id === 2) {
        this.$message.error("不允许修改管理员状态！");
      } else {
        let status = statusBoolean ? 0 : 1;
        http.updateOnlyfield({ id, status }).then(res => {
          this.getListData();
        });
      }
    },
    getListData(
      page = this.currentPage,
      list_rows = this.limit,
      search = this.searchCondition,
      role_id = this.role_id,
      type = this.teacher_type
    ) {
      this.loading = true;
      http.getList({ page, list_rows, search, role_id, type }).then(res => {
        this.loading = false;
        this.total = res.data.total;
        let tableListData = res.data.data;
        if (tableListData.length) {
          tableListData.map(item => {
            item.status = item.status == 1 ? true : false;
          });
        }
        this.tableListData = tableListData;
      });
    },

    getRole() {
      http.getRole().then(res => {
        this.roleData = res.data;
      });
    },

    getTeacherType() {
      let params = { varname: "teacher_type" };
      http.getTeacherType(params).then(res => {
        this.teacherType = res.data;
      });
    },

    // 权限管理参数：role_id
    getPageParams() {
      if (Object.keys(this.$route.params).length) {
        sessionStorage.setItem(
          "authorityListParams",
          JSON.stringify(this.$route.params)
        );
      }

      let pageParams = sessionStorage.getItem("authorityListParams");
      if (pageParams) {
        pageParams = JSON.parse(pageParams);

        if (pageParams.role_id) {
          this.role_id = pageParams.role_id;
        }
      }
      this.getListData();
    }
  },
  created() {
    this.getRole();
    this.getTeacherType();
    this.getPageParams();
  }
};
</script>

<style lang="scss" scoped>
.authorityList {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background: #f1f1f1;
  }

  &::-moz-scrollbar {
    display: none;
  }
  &::-ms-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    width: 10px;
    cursor: pointer;
    background: #bbb;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0px;
    background: #f1f1f1;
  }
  .opt_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // margin-bottom: 34px;
    &_left {
      display: flex;
      p {
        margin-right: 18px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
        &:nth-of-type(1) {
          cursor: default;
          color: #646464;
          &:hover {
            color: #646464;
          }
        }
      }
    }
    &_right {
      display: flex;
      align-items: center;
      p {
        margin: 10px 35px 0 0;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
      }
      .add {
        width: 72px;
        height: 30px;
        background: linear-gradient(top left, #17b5eb, #1796eb);
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        &:hover {
          color: white;
        }
      }
    }
  }
  .search_wrap {
    padding: 20px 30px;
  }
  .table_list {
    padding: 0px 10px;
  }
  .flag {
    padding: 3px 12px;
    background: #c6c7c9;
    color: #eee;
    border-radius: 60px;
    line-height: 22px;
    margin: 0px 5px 5px 0px;
  }
}
</style>
